<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="keywords" content="高德地图,DIY地图,高德地图生成器">
  <meta name="description" content="高德地图，DIY地图，自己制作地图，生成自己的高德地图">
  <title>高德地图 - DIY我的地图</title>
  <style>
    body {
      position: relative;
    }

    .my-map {
      margin: 0 auto;
      width: 100vw;
      height: 100vh;
    }

    .my-map .icon {
      background: url(//a.amap.com/lbs-dev-yuntu/static/web/image/tools/creater/marker.png) no-repeat;
    }

    .my-map .icon-cir {
      height: 31px;
      width: 28px;
    }

    .my-map .icon-cir-red {
      background-position: -11px -5px;
    }

    .my-map .icon-cir {
      height: 31px;
      width: 28px;
    }

    .my-map .icon-cir-red {
      background-position: -11px -5px;
    }

    .my-map .icon-cir {
      height: 31px;
      width: 28px;
    }

    .my-map .icon-cir-red {
      background-position: -11px -5px;
    }

    .my-map .icon-cir {
      height: 31px;
      width: 28px;
    }

    .my-map .icon-cir-red {
      background-position: -11px -5px;
    }

    .my-map .icon-cir {
      height: 31px;
      width: 28px;
    }

    .my-map .icon-cir-red {
      background-position: -11px -5px;
    }

    .my-map .icon-cir {
      height: 31px;
      width: 28px;
    }

    .my-map .icon-cir-red {
      background-position: -11px -5px;
    }

    .my-map .icon-cir {
      height: 31px;
      width: 28px;
    }

    .my-map .icon-cir-blue {
      background-position: -11px -55px;
    }

    .my-map .icon-cir {
      height: 31px;
      width: 28px;
    }

    .my-map .icon-cir-red {
      background-position: -11px -5px;
    }

    .my-map .icon-cir {
      height: 31px;
      width: 28px;
    }

    .my-map .icon-cir-blue {
      background-position: -11px -55px;
    }

    .my-map .icon-cir {
      height: 31px;
      width: 28px;
    }

    .my-map .icon-cir-red {
      background-position: -11px -5px;
    }

    .my-map .icon-cir {
      height: 31px;
      width: 28px;
    }

    .my-map .icon-cir-blue {
      background-position: -11px -55px;
    }

    .amap-container {
      height: 100%;
    }

    .myinfowindow {
      width: 240px;
      min-height: 50px;
    }

    .myinfowindow h5 {
      height: 20px;
      line-height: 20px;
      overflow: hidden;
      font-size: 14px;
      font-weight: bold;
      width: 220px;
      text-overflow: ellipsis;
      word-break: break-all;
      white-space: nowrap;
    }

    .myinfowindow div {
      margin-top: 10px;
      min-height: 40px;
      line-height: 20px;
      font-size: 13px;
      color: #6f6f6f;
    }

    #wrap {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }
  </style>
</head>

<body>
  <div id="wrap" class="my-map">
    <div id="mapContainer"></div>
  </div>
  <div class="">

  </div>
  <script src="//webapi.amap.com/maps?v=1.3&key=e07ffdf58c8e8672037bef0d6cae7d4a"></script>
  <script>
    !function () {
      var infoWindow, map, level = 13,
        center = { lng: 114.330964, lat: 22.607522 },
        features = [{ "icon": "cir", "color": "red", "name": "号牌-粤B123425", "desc": "在线中", "lnglat": { "Q": 22.656519053144095, "R": 114.2657108719647, "lng": 114.265711, "lat": 22.656519 }, "offset": { "x": -9, "y": -31 }, "type": "Marker" }, { "icon": "cir", "color": "red", "name": "未命名标注", "desc": "未命名标注描述", "lnglat": { "Q": 22.645904871578523, "R": 114.26661209553481, "lng": 114.266612, "lat": 22.645905 }, "offset": { "x": -9, "y": -31 }, "type": "Marker" }, { "icon": "cir", "color": "red", "name": "号牌-粤B123425", "desc": "在线中", "lnglat": { "Q": 22.645904871578523, "R": 114.26661209553481, "lng": 114.266612, "lat": 22.645905 }, "offset": { "x": -9, "y": -31 }, "type": "Marker" }, { "icon": "cir", "color": "red", "name": "未命名标注", "desc": "未命名标注描述", "lnglat": { "Q": 22.640518260438107, "R": 114.22798828572036, "lng": 114.227988, "lat": 22.640518 }, "offset": { "x": -9, "y": -31 }, "type": "Marker" }, { "icon": "cir", "color": "red", "name": "号牌-粤B123425", "desc": "在线中", "lnglat": { "Q": 22.640518260438107, "R": 114.22798828572036, "lng": 114.227988, "lat": 22.640518 }, "offset": { "x": -9, "y": -31 }, "type": "Marker" }, { "icon": "cir", "color": "red", "name": "未命名标注", "desc": "未命名标注描述", "lnglat": { "Q": 22.62815994268547, "R": 114.21957687824965, "lng": 114.219577, "lat": 22.62816 }, "offset": { "x": -9, "y": -31 }, "type": "Marker" }, { "icon": "cir", "color": "blue", "name": "号牌-粤B122425", "desc": "离线中", "lnglat": { "Q": 22.62815994268547, "R": 114.21957687824965, "lng": 114.219577, "lat": 22.62816 }, "offset": { "x": -9, "y": -31 }, "type": "Marker" }, { "icon": "cir", "color": "red", "name": "未命名标注", "desc": "未命名标注描述", "lnglat": { "Q": 22.611997389001445, "R": 114.23176483601333, "lng": 114.231765, "lat": 22.611997 }, "offset": { "x": -9, "y": -31 }, "type": "Marker" }, { "icon": "cir", "color": "blue", "name": "号牌-粤B123425", "desc": "离线中", "lnglat": { "Q": 22.611997389001445, "R": 114.23176483601333, "lng": 114.231765, "lat": 22.611997 }, "offset": { "x": -9, "y": -31 }, "type": "Marker" }, { "icon": "cir", "color": "red", "name": "未命名标注", "desc": "未命名标注描述", "lnglat": { "Q": 22.615166666894698, "R": 114.25562576740981, "lng": 114.255626, "lat": 22.615167 }, "offset": { "x": -9, "y": -31 }, "type": "Marker" }, { "icon": "cir", "color": "blue", "name": "号牌-粤B223425", "desc": "离线中", "lnglat": { "Q": 22.615166666894698, "R": 114.25562576740981, "lng": 114.255626, "lat": 22.615167 }, "offset": { "x": -9, "y": -31 }, "type": "Marker" }];

      function loadFeatures() {
        for (var feature, data, i = 0, len = features.length, j, jl, path; i < len; i++) {
          data = features[i];
          switch (data.type) {
            case "Marker":
              feature = new AMap.Marker({
                map: map, position: new AMap.LngLat(data.lnglat.lng, data.lnglat.lat),
                zIndex: 3, extData: data, offset: new AMap.Pixel(data.offset.x, data.offset.y), title: data.name,
                content: '<div class="icon icon-' + data.icon + ' icon-' + data.icon + '-' + data.color + '"></div>'
              });
              break;
            case "Polyline":
              for (j = 0, jl = data.path.length, path = []; j < jl; j++) {
                path.push(new AMap.LngLat(data.path[j].lng, data.path[j].lat));
              }
              feature = new AMap.Polyline({
                map: map, path: path, extData: data, zIndex: 2,
                strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity
              });
              break;
            case "Polygon":
              for (j = 0, jl = data.path.length, path = []; j < jl; j++) {
                path.push(new AMap.LngLat(data.path[j].lng, data.path[j].lat));
              }
              feature = new AMap.Polygon({
                map: map, path: path, extData: data, zIndex: 1,
                strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity,
                fillColor: data.fillColor, fillOpacity: data.fillOpacity
              });
              break;
            default: feature = null;
          }
          if (feature) { AMap.event.addListener(feature, "click", mapFeatureClick); }
        }
      }

      function mapFeatureClick(e) {
        if (!infoWindow) { infoWindow = new AMap.InfoWindow({ autoMove: true, isCustom: false }); }
        var extData = e.target.getExtData();
        infoWindow.setContent("<div class='myinfowindow'><h5>" + extData.name + "</h5><div>" + extData.desc + "</div></div>");
        infoWindow.open(map, e.lnglat);
      }

      map = new AMap.Map("mapContainer", { center: new AMap.LngLat(center.lng, center.lat), level: level, keyboardEnable: true, dragEnable: true, scrollWheel: true, doubleClickZoom: true });

      loadFeatures();

      map.on('complete', function () {
        map.plugin(["AMap.ToolBar", "AMap.OverView", "AMap.Scale"], function () {
          map.addControl(new AMap.ToolBar({ ruler: true, direction: true, locate: false })); map.addControl(new AMap.OverView({ isOpen: true })); map.addControl(new AMap.Scale);
        });
      })

    }();
  </script>
</body>

</html>